<template>
    <div>
        <div class="breadcrumb_nav">
            <BreadCrumb></BreadCrumb>
        </div>
        <div class="enter_studentInfo">
            <div class="inner">
                <h1>学生信息录入</h1>
                <el-form ref="form" :model="form" label-width="80px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="学号" prop="stu_id">
                                <el-input v-model="form.stu_id"></el-input>
                            </el-form-item>
                            <el-form-item label="姓名" prop="stu_name">
                                <el-input v-model="form.stu_name"></el-input>
                            </el-form-item>
                            <el-form-item label="性别" class="center" prop="stu_sex">
                                <el-radio v-model="form.stu_sex" label="男">男</el-radio>
                                <el-radio v-model="form.stu_sex" label="女">女</el-radio>
                            </el-form-item>
                            <el-form-item label="籍贯">
                                <!-- 用的是cascader级联选择器 -->
                                <el-cascader v-model="value" :options="options" @change="handleChange"
                                    :props="{ label: 'name', value: 'name' }"></el-cascader>
                            </el-form-item>
                            <el-form-item label="出生日期" prop="stu_date">
                                <el-col :span="16">
                                    <el-date-picker type="date" placeholder="出生日期" v-model="form.stu_date"
                                        style="width: 100%;">
                                    </el-date-picker>
                                </el-col>
                            </el-form-item>
                            <el-form-item label="男女朋友" prop="stu_gbf">
                                <el-input v-model="form.stu_gbf"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="头像" prop="stu_head_img">
                                <img width="150px" height="200px" v-if="form.stu_head_img" :src="form.stu_head_img"
                                    alt="">
                                <img width="150px" height="200px" v-else src="@/assets/img/register_bg.webp" alt=""><br>
                                <div>
                                    <p>
                                        注：将其转为base64字符串上传，图片大小为1M左右，否则不能上传
                                    </p>
                                </div>
                                <el-button type="primary" @click="submit_img">点击上传头像</el-button>
                                <el-button @click="goCamera">拍照上传</el-button>
                                <input type="file" @change="getInput" ref="getimg" hidden>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="爱好及自我评价" prop="stu_hobby">
                        <!-- 使用富文本编辑器 -->
                        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig"
                            :mode="mode" />
                        <div class="wangEditWrap" style="height: 160px; overflow: hidden">
                            <Editor style="height: 500px; overflow-y: hidden" v-model="html"
                                :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" />
                        </div>
                    </el-form-item>
                    <el-form-item class="center">
                        <el-button type="primary" @click="submitForm">提交</el-button>
                        <el-button @click="resetForm">重置</el-button>
                        <el-button type="primary" @click="$router.push({ name: 'test_reset_component' })">go
                            testResetComponent
                        </el-button>
                    </el-form-item>
                </el-form>


            </div>
        </div>
    </div>

</template>

<script>
import { Radio, Cascader } from 'element-ui';
//引入获取籍贯信息的接口
import { req_area, req_stu_info } from '@/api/stuInfo.js';
//编辑器
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';


export default {
    data() {
        return {
            form: {
                stu_id: '',
                stu_name: '',
                stu_sex: '男',
                stu_jg: '',
                stu_date: '',
                stu_hobby: '',
                stu_gbf: '',
                stu_head_img: ''
            },
            cameraSrc: this.$router.query,
            value: [],
            options: [],
            // 富文本编辑器组件的初始化数据
            editor: null,
            html: "<p></p>",
            toolbarConfig: {},
            editorConfig: { placeholder: "请输入内容..." },
            mode: "default", // or 'simple'

        };
    },
    components: {
        "el-radio": Radio,
        "el-cascader": Cascader,
        Editor, Toolbar
    },
    methods: {
        handleChange(value) {
            // console.log(value)
            //value是收集到的 客户选择好的籍贯信息，但是格式是数组，则要转化格式
            this.form.stu_jg = value.join('-');
        },
        async submitForm() {
            console.log('提交');
            //提交头像服务器返回413，代表图片过大，可以调 图片尺寸，也可以 调图片质量
            // console.log(this.editor.getText())   getText() 获取富文本编辑器中输入的值
            // console.log(this.editor.getHtml())   getHtml() 获取富文本编辑器中的标签
            this.form.stu_hobby = this.editor.getText();
            console.log(this.form);
            //将收集的表单数据发送到服务器，进行记录
            let result = await req_stu_info(this.form);
            console.log(result);

            //设置弹框消息 显示数据成功，还是失败
            this.$message({
                message: "数据提交成功！！",
                type: "success",
                offset: 130,
            });
            //调用重置按钮中的方法实现重置
            this.resetForm()
        },
        resetForm() {
            //重置的意思就是清空form表单中的数据
            console.log('重置')
            //使用element-ui中自带的方法，进行清空
            // this.form.stu_hobby='';
            // this.form.stu_jg = '';
            this.value = [];//清空籍贯
            this.html = "<p></p>";//清空富文本编辑器中的内容
            this.$refs.getimg.value = [];//清空上传头像的文本
            this.$refs.form.resetFields();//清空表单数据
            //清空传过来的头像
            this.$route.query.src = ''

        },
        //使用富文本编辑器
        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
        //获取照片的信息
        getInput() {
            let that = this;
            // console.dir(this.$refs.getimg.files)  获得的是数组
            // console.log(this.$refs.getimg.files[0])  获得上传的图片的信息
            //将图片信息转换成base64字符串
            let f = this.$refs.getimg.files[0];
            let fr = new FileReader();
            fr.readAsDataURL(f);
            fr.onload = function () {
                // console.log(fr.result)  就是图片转换后的base64字符串
                //将字符串赋值给stu_head_img  注意this指向  该函数中的this指向的是
                // console.dir(this)  this指向FileReader()函数  所以赋值给data中的数据就要中转一下
                that.form.stu_head_img = fr.result;
            }
        },
        submit_img() {
            this.$refs.getimg.click();//即 点击button就相当于点击input框
        },
        //拍照上传
        goCamera() {
            this.$router.push({
                name: 'cameraUpload'
            })
        }
    },

    async mounted() {

        //当页面加在完成时自动发送ajax请求，目的是拿到籍贯信息，将值给籍贯框中
        let result = await req_area();
        // console.log(result);
        //将请求回来的值赋给了联级选择器，注意 键名的配置
        this.options = result.data;
        //请求回来的数据 如何渲染到级联选择器中
        /*
            :props="{label:'name',value:'name'}
            通过props进行键名更改。--> 因为 级联选择器显示设置的键名，与服务器相应回来的数据的键名不一致，通过prps进行配置
                label--> 框内显示的值     在级联选择器中  label 与 服务器的  name 配置   即  label中的值由服务器的name给
                value--> 是收集的值，也是要发送给后台的值   级联选择器的value 配置服务器的 name 即  值是由服务器的name给
        */

        //拍照传过来的照片
        //注意：因为是兄弟路由组件传过来的值，所以可以在mounted中访问得到
        //      如果是父子路由组件传过来的值，是访问不到的，因为mounted只挂载一次，得通过watch去监听
        this.form.stu_head_img = this.$route.query.src;

    },
    //当组件销毁时，销毁富文本编辑器
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    }

}

</script>

<style lang="scss" scoped>
div {
    .breadcrumb_nav {
        height: 30px;
    }

    .enter_studentInfo {
        display: flex;
        // align-items: center;
        justify-content: center;



        .inner {
            width: 800px;

            h1 {
                margin-bottom: 10px;
                text-align: center;
            }

        }
    }
}
</style>